<template>
  <div class="lesson-video">
    <!-- 顶部导航栏，添加点击返回事件 -->
    <van-nav-bar
      title="视频"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 视频播放容器，设置id -->
    <div class="prism-player" id="player"></div>
  </div>
</template>
<script>
// 禁止eslint检查下面代码，不设置可能会报错，我就报错了
/* eslint-disable*/
// 引入接口：获取视频播放信息
import { videoPlayInfo } from '@/api/course'
export default {
  name: 'lesson-video',
  // 获取参数
  props: {
    // 路径参数
    lessonId: {
      type: [Number, String],
      required: true
    }
  },
  // 钩子函数
  created () {
    // 获取视频播放信息
    this.getVideoInfo()
  },
  methods: {
    // 获取视频播放信息
    async getVideoInfo () {
      // 调用接口
      const { data } = await videoPlayInfo(this.lessonId)
      // 设置阿里云视频播放器，新建一个实例
      const player = new Aliplayer({
        // 容器ID
        id: 'player',
        // 下面两个属性是上面接口返回的视频信息
        vid: data.content.fileId,
        playauth: data.content.playAuth,
        qualitySort: 'asc',
        format: 'mp4',
        mediaType: 'video',
        width: '100%',
        height: '500px',
        autoplay: true,
        isLive: false,
        rePlay: false,
        playsinline: true,
        preload: true,
        controlBarVisibility: 'hover',
        useH5Prism: true
      }, function (player) {
        console.log('The player is created')
      })
    }
  }
}
</script>
